# !/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
===========================
@Time : 2022/8/23 0023 23:17
@Author : 测试开发工程师
@File : 3. Vue 常用指令（二）.py
@Software: PyCharm
============================
"""

"""
v-if  条件渲染
    v-if 指令用于返回表达式为 true 的值
    切换多个元素可以使用 <template> 
    
v-else 条件渲染    
    v-else 指令表示 v-if 的 else 部分
    v-else 元素需要在 v-if 或者 v-else-if 的元素后面
    
v-show  元素是否显示     当值为 false 时，元素虽然不展示，增加 style="display: none";
    根据表达式的值，切换元素 display 的 CSS 属性值
    

v-if 和 v-show 区别:
    v-if 通过操纵 dom 元素来进行切换显示
    表达式的值为  true 时，元素存在于  dom 树中
    表达式的值为 false 时，元素从 dom 树中移除
    
    v-show 只是简单控制 dom 元素的 display 属性
    渲染 HTML 元素，符合条件时显示，不符合条件 display 为 none,元素还在 dom 树

"""
